<template>
  <div class="content-sides">
    <div class="content-side content-side-left">
      <div class="main-title-wrapper">
        <div class="main-subtitle">{{ subtitle }}</div>
        <div class="main-title">{{ title }}</div>
      </div>
      <NextButton v-if="showNextButton" @click="$emit('next')" />
    </div>
    
    <div class="content-side content-side-right">
      <div class="client-blocks">
        <ClientCard
          v-for="client in clients"
          :key="client.id"
          :name="client.name"
          :logo="client.logo"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ClientCard from './ClientCard.vue';
import NextButton from './NextButton.vue';

// 导入客户logo
import c1 from '@/assets/images/clients/c1.png';
import c2 from '@/assets/images/clients/c2.png';
import c3 from '@/assets/images/clients/c3.png';
import c4 from '@/assets/images/clients/c4.png';
import c5 from '@/assets/images/clients/c5.png';
import c6 from '@/assets/images/clients/c6.png';
import c7 from '@/assets/images/clients/c7.png';
import c8 from '@/assets/images/clients/c8.png';
import c9 from '@/assets/images/clients/c9.png';
import c10 from '@/assets/images/clients/c10.png';
import c11 from '@/assets/images/clients/c11.png';
import c12 from '@/assets/images/clients/c12.png';
import c13 from '@/assets/images/clients/c13.png';
import c14 from '@/assets/images/clients/c14.png';
import c15 from '@/assets/images/clients/c15.png';
import c16 from '@/assets/images/clients/c16.png';
import c17 from '@/assets/images/clients/c17.png';
import c18 from '@/assets/images/clients/c18.png';
import c19 from '@/assets/images/clients/c19.png';

interface Client {
  id: string;
  name: string;
  logo: string;
}

defineProps<{
  subtitle: string;
  title: string;
  showNextButton?: boolean;
}>();

defineEmits<{
  (e: 'next'): void;
}>();

// 客户数据
const clients: Client[] = [
  { id: '1', name: 'Client 1', logo: c1 },
  { id: '2', name: 'Client 2', logo: c2 },
  { id: '3', name: 'Client 3', logo: c3 },
  { id: '4', name: 'Client 4', logo: c4 },
  { id: '5', name: 'Client 5', logo: c5 },
  { id: '6', name: 'Client 6', logo: c6 },
  { id: '7', name: 'Client 7', logo: c7 },
  { id: '8', name: 'Client 8', logo: c8 },
  { id: '9', name: 'Client 9', logo: c9 },
  { id: '10', name: 'Client 10', logo: c10 },
  { id: '11', name: 'Client 11', logo: c11 },
  { id: '12', name: 'Client 12', logo: c12 },
  { id: '13', name: 'Client 13', logo: c13 },
  { id: '14', name: 'Client 14', logo: c14 },
  { id: '15', name: 'Client 15', logo: c15 },
  { id: '16', name: 'Client 16', logo: c16 },
  { id: '17', name: 'Client 17', logo: c17 },
  { id: '18', name: 'Client 18', logo: c18 },
  { id: '19', name: 'Client 19', logo: c19 },
];
</script>

<style scoped>
.content-sides {
  width: 100%;
  max-width: 150rem; /* 与screen_content一致 */
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between;
  gap: 4rem;
  animation: fadeIn 0.8s ease-out;
}

.content-side-left {
  width: 40%; /* 与原网站一致 */
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

.main-title-wrapper {
  margin-bottom: 7rem; /* 与原网站一致 */
}

.main-subtitle {
  font-size: 1.8rem;
  color: #e58707;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main-title {
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.content-side-right {
  width: 60%; /* 与原网站一致 */
}

.client-blocks {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 使用原网站的flexbox布局 */
}

/* 响应式 */
@media (max-width: 1024px) {
  .content-sides {
    padding: 0 2rem;
    gap: 3rem;
  }
  
  .main-title {
    font-size: 6rem;
  }
}

@media (max-width: 768px) {
  .content-sides {
    flex-direction: column;
    padding: 2rem 1.5rem;
  }
  
  .content-side-left {
    width: 100%;
    padding-right: 0;
    margin-bottom: 4rem;
  }
  
  .content-side-right {
    width: 100%;
  }
  
  .main-title {
    font-size: 5rem;
  }
  
  .main-title-wrapper {
    margin-bottom: 3rem;
  }
  
  .client-blocks {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 3.4rem;
  }
}
</style>

